<template>
	<view class="index">
		<swiper class="swiper" :indicator-dots="indicatorDots" :interval="interval" indicator-color='rgba(255, 255, 255, .3)' indicator-active-color='#fff' :duration="duration">
			<swiper-item class='swiperItem'>
				<view class="swiper-item page1"></view>
			</swiper-item>
			<swiper-item class='swiperItem'>
				<view class="swiper-item page2"></view>
			</swiper-item>
			<swiper-item class='swiperItem'>
				<view class="swiper-item page3"></view>
			</swiper-item>
			<swiper-item class='swiperItem'>
				<view class="swiper-item page4"></view>
				<view :class="type?'btn active':'btn'" @touchend='type=false' @touchstart='type=true' @tap='goTo'>立即体验</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				type: false
			}
		},
		methods: {
			goTo() {
				this.fileWriter()
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			fileWriter() {
				plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fobject) {
					fobject.root.getFile('token.txt', {
						create: true
					}, function(fileEntry) {
						fileEntry.file(function(file) {
							fileEntry.createWriter(function(writer) {
								writer.seek(0)
								writer.write('needLogin')
							}, function(e) {
								console.log(e)
							})
						})
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100vh;
	}

	.active {
		background-color: rgba($color: #dddddd, $alpha: .3);
	}

	/deep/.uni-swiper-dots-horizontal {
		.uni-swiper-dot {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.swiper {
		height: 100vh;

		.swiperItem {
			height: 100%;
			position: relative;

			.btn {
				transition: .2s;
				position: absolute;
				bottom: 400rpx;
				left: 50%;
				transform: translate(-50%);
				z-index: 99;
				font-size: 36rpx;
				letter-spacing: 2rpx;
				color: #70B1F8;
				border: 2rpx solid #70B1f8;
				width: 260rpx;
				height: 80rpx;
				line-height: 76rpx;
				text-align: center;
				border-radius: 80rpx;
			}

			.page1 {
				background: url(/static/guide/1.jpg) no-repeat;
			}

			.page2 {
				background: url(/static/guide/2.jpg) no-repeat;
			}

			.page3 {
				background: url(/static/guide/3.jpg) no-repeat;
			}

			.page4 {
				background: url(/static/guide/4.jpg) no-repeat;
			}

			.swiper-item {
				height: 100vh;
				background-size: 100% 100%;
			}

		}
	}
</style>
